<template>
    <view
        class="diy-goods component-diy"
        :style="
            'margin-top: ' +
            componentData.data.marginTop * 2 +
            'rpx;margin-bottom: ' +
            componentData.data.marginBottom * 2 +
            'rpx; padding: 0 ' +
            componentData.data.marginLeftRight * 2 +
            'rpx;'
        "
    >
        <view
            :class="'goods-list ' + (!!layout ? layout : componentData.data.layout)"
            v-if="goods && goods.length > 0"
            :style="
                'background-color: ' +
                componentData.data.bgColor +
                ';padding: ' +
                componentData.data.paddingTopBottom * 2 +
                'rpx ' +
                componentData.data.paddingLeftRight * 2 +
                'rpx; border-radius:' +
                (cardStyle == 1 ? 16 : 0) +
                'rpx;'
            "
        >
            <block :key="index" v-for="(item, index) in goods">
                <view class="goods" @click="toGiftPage(item.data.spu.product_id)" :style="'padding: ' + componentData.data.goodsMargin * 2 + 'rpx;border-radius:' + componentData.data.goodsRadius * 2 + 'rpx;'">
                    <view
                        v-if="!item.data.spu.path"
                        :class="'link ' + ('link-card-type-' + componentData.data.cardType)"
                        :style="'border-radius:' + componentData.data.goodsRadius * 2 + 'rpx;'"
                        @tap="noPathMsg(item.data)"
                    >
                        <view
                            :id="'img-ctx-' + index"
                            class="img"
                            :style="
                                'background-image: url(' +
                                item.data.spu.head_img[0] +
                                ');height:' +
                                (imageHeight === '' ? 'auto' : imageHeight * (componentData.data.layout === 'one-big-two-small' && index % 3 !== 0 ? 0.5 : 1) + 'px') +
                                ';'
                            "
                        >
                            <view v-if="componentData.data.cornerMark" class="corner-mark">
                                <block v-if="componentData.data.cornerMarkType === 1 && componentData.data.cornerMarkText">
                                    <view
                                        class="corner-mark-text"
                                        :style="'color:' + componentData.data.cornerMarkColor + ';background-color: ' + componentData.data.cornerMarkBackgroundColor + ';'"
                                    >
                                        {{ componentData.data.cornerMarkText }}
                                    </view>
                                </block>
                                <block v-if="'componentData.data.cornerMarkType === 2'">
                                    <image :src="componentData.data.cornerMarkImage" style="width: 30px; height: 30px" lazy-load></image>
                                </block>
                            </view>
                        </view>
                        <view class="goods-info-wrap">
                            <view class="goods-info-box">

                                <view class="price-cart">
                                    <view
                                        v-if="componentData.data.price"
                                        class="price"
                                        :style="
                                            'font-size:' +
                                            componentData.data.priceFontSize * 2 +
                                            'rpx;color: ' +
                                            componentData.data.priceColor +
                                            ';font-weight: ' +
                                            componentData.data.priceFontWeight +
                                            ';'
                                        "
                                    > 
										<view
										    v-if="componentData.data.title"
										    :class="'title ' + (componentData.data.titleLine == 2 ? 'line2' : '')"
										    :style="
										        'color: ' +
										        componentData.data.titleColor +
										        ';font-size: ' +
										        componentData.data.titleFontSize * 2 +
										        'rpx;line-height: ' +
										        (componentData.data.titleFontSize * 2 + 12) +
										        'rpx;font-weight: ' +
										        componentData.data.titleFontWeight +
										        ';'
										    "
										>
										    <text decode>{{ item.data.spu.title || '&nbsp;' }}</text>
										</view>
                                    </view>
                                    <view v-if="componentData.data.buyBtn && componentData.data.buyBtnType && buyBtn">
                                        <block v-if="buyBtn.icon">
                                            <view :style="'color:' + componentData.data.buyBtnColor">
                                                <i :class="'iconfont ' + buyBtn.icon"></i>
                                            </view>
                                        </block>
                                        <block v-if="!buyBtn.icon">
                                            <view
                                                :class="
                                                    ' el-button el-button--mini el-button--' + buyBtn.type + ' ' + (buyBtn.type == 'plain' ? 'el-button--primary is-plain' : '')
                                                "
                                                :style="'border-radius: ' + buyBtn.round * 2 + 'rpx;' + buyBtnStyle"
                                            >
                                                 {{componentData.data.buyBtnText?componentData.data.buyBtnText:"立即购买"}}
                                            </view>
                                        </block>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view
                        v-else-if="noBegin"
                        :class="'link ' + ('link-card-type-' + componentData.data.cardType)"
                        :style="'border-radius:' + componentData.data.goodsRadius * 2 + 'rpx;'"
                        @tap="noBeginMsg"
                    >
                        <!-- parse <include src="./goods-template.wxml"></include> -->
                        <view
                            :id="'img-ctx-' + index"
                            class="img"
                            :style="
                                'background-image: url(' +
                                item.data.spu.head_img[0] +
                                ');height:' +
                                (imageHeight === '' ? 'auto' : imageHeight * (componentData.data.layout === 'one-big-two-small' && index % 3 !== 0 ? 0.5 : 1) + 'px') +
                                ';'
                            "
                        >
                            <view v-if="componentData.data.cornerMark" class="corner-mark">
                                <block v-if="componentData.data.cornerMarkType === 1 && componentData.data.cornerMarkText">
                                    <view
                                        class="corner-mark-text"
                                        :style="'color:' + componentData.data.cornerMarkColor + ';background-color: ' + componentData.data.cornerMarkBackgroundColor + ';'"
                                    >
                                        {{ componentData.data.cornerMarkText }}
                                    </view>
                                </block>
                                <block v-if="'componentData.data.cornerMarkType === 2'">
                                    <image :src="componentData.data.cornerMarkImage" style="width: 30px; height: 30px" lazy-load></image>
                                </block>
                            </view>
                        </view>
                        <view class="goods-info-wrap">
                            <view class="goods-info">
                                <view class="price-cart">
                                    <view
                                        v-if="componentData.data.price"
                                        class="price"
                                        :style="
                                            'font-size:' +
                                            componentData.data.priceFontSize * 2 +
                                            'rpx;color: ' +
                                            componentData.data.priceColor +
                                            ';font-weight: ' +
                                            componentData.data.priceFontWeight +
                                            ';'
                                        "
                                    >
										<view
										    v-if="componentData.data.title"
										    :class="'title ' + (componentData.data.titleLine == 2 ? 'line2' : '')"
										    :style="
										        'color: ' +
										        componentData.data.titleColor +
										        ';font-size: ' +
										        componentData.data.titleFontSize * 2 +
										        'rpx;line-height: ' +
										        (componentData.data.titleFontSize * 2 + 12) +
										        'rpx;font-weight: ' +
										        componentData.data.titleFontWeight +
										        ';'
										    "
										>
										    <text decode>{{ item.data.spu.title || '&nbsp;' }}</text>
										</view>
                                    </view>
                                    <view v-if="componentData.data.buyBtn && componentData.data.buyBtnType && buyBtn">
                                        <block v-if="buyBtn.icon">
                                            <view :style="'color:' + componentData.data.buyBtnColor">
                                                <i :class="'iconfont ' + buyBtn.icon"></i>
                                            </view>
                                        </block>
                                        <block v-if="!buyBtn.icon">
                                            <view
                                                :class="
                                                    ' el-button el-button--mini el-button--' + buyBtn.type + ' ' + (buyBtn.type == 'plain' ? 'el-button--primary is-plain' : '')
                                                "
                                                :style="'border-radius: ' + buyBtn.round * 2 + 'rpx;' + buyBtnStyle"
                                            >
                                               {{componentData.data.buyBtnText?componentData.data.buyBtnText:"立即购买"}}
                                            </view>
                                        </block>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <navigator
                        v-else
                        :url="item.data.spu.path"
                        :class="'link ' + ('link-card-type-' + componentData.data.cardType)"
                        :style="'border-radius:' + componentData.data.goodsRadius * 2 + 'rpx;'"
                    >
                        <!-- parse <include src="./goods-template.wxml"></include> -->
                        <view
                            :id="'img-ctx-' + index"
                            class="img"
                            :style="
                                'background-image: url(' +
                                item.data.spu.head_img[0] +
                                ');height:' +
                                (imageHeight === '' ? 'auto' : imageHeight * (componentData.data.layout === 'one-big-two-small' && index % 3 !== 0 ? 0.5 : 1) + 'px') +
                                ';'
                            "
                        >
                            <view v-if="componentData.data.cornerMark" class="corner-mark">
                                <block v-if="componentData.data.cornerMarkType === 1 && componentData.data.cornerMarkText">
                                    <view
                                        class="corner-mark-text"
                                        :style="'color:' + componentData.data.cornerMarkColor + ';background-color: ' + componentData.data.cornerMarkBackgroundColor + ';'"
                                    >
                                        {{ componentData.data.cornerMarkText }}
                                    </view>
                                </block>
                                <block v-if="'componentData.data.cornerMarkType === 2'">
                                    <image :src="componentData.data.cornerMarkImage" style="width: 30px; height: 30px" lazy-load></image>
                                </block>
                            </view>
                        </view>
                        <view class="goods-info-wrap">
                            <view class="goods-info">
                                <view
                                    v-if="componentData.data.title"
                                    :class="'title ' + (componentData.data.titleLine == 2 ? 'line2' : '')"
                                    :style="
                                        'color: ' +
                                        componentData.data.titleColor +
                                        ';font-size: ' +
                                        componentData.data.titleFontSize * 2 +
                                        'rpx;line-height: ' +
                                        (componentData.data.titleFontSize * 2 + 12) +
                                        'rpx;font-weight: ' +
                                        componentData.data.titleFontWeight +
                                        ';'
                                    "
                                >
                                    <text decode>{{ item.data.spu.title || '&nbsp;' }}</text>
                                </view>

                                <view
                                    v-if="componentData.data.subTitle || !!layout"
                                    :class="'title ' + (componentData.data.subTitleLine == 2 ? 'line2' : '')"
                                    :style="
                                        'color: ' +
                                        componentData.data.subTitleColor +
                                        ';font-size: ' +
                                        componentData.data.subTitleFontSize * 2 +
                                        'rpx;line-height: ' +
                                        (componentData.data.titleFontSize * 2 + 12) +
                                        'rpx;font-weight: ' +
                                        componentData.data.subTitleFontWeight +
                                        ';'
                                    "
                                >
                                    <text decode v-if="!!layout" style="text-decoration: line-through">原价:￥{{ item.stock_price / 100 }}</text>
                                    <text decode v-else>{{ item.data.spu.sub_title || '&nbsp;' }}</text>
                                </view>

                                <view class="price-cart">
                                    <view
                                        v-if="componentData.data.price"
                                        class="price"
                                        :style="
                                            'font-size:' +
                                            componentData.data.priceFontSize * 2 +
                                            'rpx;color: ' +
                                            componentData.data.priceColor +
                                            ';font-weight: ' +
                                            componentData.data.priceFontWeight +
                                            ';'
                                        "
                                    >
                                        <block v-if="!layout">￥{{ item.data.spu.min_price / 100 }}</block>
                                        <block v-else>
                                            抢购￥
                                            <text :style="'font-size:' + (componentData.data.priceFontSize * 2 + 4) + 'rpx;font-weight:bold'">
                                                {{ item.min_price / 100 }}
                                            </text>
                                        </block>
                                    </view>
                                    <view v-if="componentData.data.buyBtn && componentData.data.buyBtnType && buyBtn">
                                        <block v-if="buyBtn.icon">
                                            <view :style="'color:' + componentData.data.buyBtnColor">
                                                <i :class="'iconfont ' + buyBtn.icon"></i>
                                            </view>
                                        </block>
                                        <block v-if="!buyBtn.icon">
                                            <view
                                                :class="
                                                    ' el-button el-button--mini el-button--' + buyBtn.type + ' ' + (buyBtn.type == 'plain' ? 'el-button--primary is-plain' : '')
                                                "
                                                :style="'border-radius: ' + buyBtn.round * 2 + 'rpx;' + buyBtnStyle"
                                            >
                                                立即购买
                                            </view>
                                        </block>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </navigator>
                </view>
            </block>
        </view>
        <!-- <view wx:else class="  noSetting"> 商品导航组件参数未设置 </view> -->
    </view>
</template>
<script>
import diyNavigator from '../diy-navigator/diy-navigator';
import { buyBtnConfigData, getThemeCluster } from '../diy-goods/buy-btn.config'; // const app = getApp()
export default {
    components: {
        diyNavigator
    },
    data() {
        return {
            goods: [],
            imagesStyle: '',
            imageHeight: 0,
            buyBtnConfigData,
            buyBtn: null,
            buyBtnStyle: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        componentData: {
            type: Object
        },
        layout: {
            type: String
        },
        cardStyle: {
            type: String
        },
        noBegin: {
            // 0 进行中 1 未开始 2 已结束
            type: Number
        },
        type: {
            type: String
        }
    },
    watch: {
        componentData: {
            handler: function () {
                const buyBtn = this.buyBtnConfigData.find((item) => {
                    return item.key === this.componentData.data.buyBtnType;
                });

                if (buyBtn) {
                    this.setData({
                        buyBtn
                    });
                }

                if (buyBtn) {
                    this.execBuyBtnStyle(buyBtn);
                }

                this.getGoodsInfo();
            },

            immediate: true,
            deep: true
        }
    },
    beforeMount() {},
    mounted() {
        const buyBtn = this.buyBtnConfigData.find((item)=>{
          return item.key === this.componentData.data.buyBtnType;
        });
        buyBtn && this.setData({buyBtn});
        if(buyBtn){
          this.execBuyBtnStyle(buyBtn);
        }
        this.getGoodsInfo()
    },
    /**
     * 组件的方法列表
     */
    methods: {
		toGiftPage(goodsId){
			uni.navigateTo({
				url: '/pages/mine/gift_purchase/gift_purchase?id=' + goodsId,
			})
		},
        noBeginMsg() {
            // 0 进行中 1 未开始 2 已结束
            const { noBegin } = this;
            let title;

            if (!!noBegin) {
                if (noBegin == 2) {
                    title = '活动已经结束';
                } else {
                    title = '活动还未开始，待会儿在来试试吧';
                }
            }

            uni.showToast({
                title,
                icon: 'none'
            });
        },

        noPathMsg(e) {
			this.$emit("toOrderFoot",{
				id:e.spu.product_id
			})
            // uni.showToast({
            //     title: '该商品是虚拟商品',
            //     icon: 'none'
            // });
        },

        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        execBuyBtnStyle(buyBtn) {
            if (buyBtn.icon) {
                return;
            } // console.log('execBuyBtnStyle',buyBtn,this.data.componentData.data);

            const { buyBtnColor } = this.componentData.data;
            const arr = getThemeCluster(buyBtnColor);
            const obj = {};

            if (buyBtn.type === 'plain') {
                obj['border-color'] = `${arr[6]}!important`;
                obj['background-color'] = `${arr[10]}!important`;
                obj['color'] = `${buyBtnColor}!important`;
            } else if (buyBtn.type === 'primary') {
                obj['border-color'] = `${buyBtnColor}!important`;
                obj['background-color'] = `${buyBtnColor}!important`;
                obj['color'] = `#fff`;
            } else if (buyBtn.type === '') {
            }

            const buyBtnStyle = Object.keys(obj)
                .map((key) => {
                    return key + ':' + obj[key];
                })
                .join(';');
            this.setData({
                buyBtnStyle
            });
        },

        getHeight() {
            if (!this.goods.length) {
                return false;
            }
            this.getRect('#img-ctx-0')
                .then((res) => {
					// console.log(res);
                    if (res === null) {
                        return Promise.reject();
                    }

                    try {
                        const arr = this.componentData.data.imgRatio.split(':');
                        const imageHeight = (res.width * arr[1]) / arr[0];
                        // console.log('imageHeight', res.width, imageHeight);
                        this.setData({
                            imageHeight
                        });
                    } catch (e) {}
                })
                .catch(() => {
                    if (!this.getHeightNum) {
                        this.getHeightNum = 1;
                    } else {
                        this.getHeightNum++;
                    }

                    if (this.getHeightNum > 10) {
                        return false;
                    }

                    this.getHeight();
                });
        },

        getRect(selector) {
            return new Promise((resolve) => {
                uni.createSelectorQuery()
                    .in(this)
                    .select(selector)
                    .boundingClientRect((rect) => {
                        resolve(rect);
                    })
                    .exec();
            });
        },

        /**
         * 根据id获取商品列表
         * e = 'again'
         */
        getGoodsInfo(e = 'again') {
            if (!this.layout) {
                this.setData({
                    goods: this.componentData.data.goodsChecked.map((ele) => {
                        return {
                            data: {
                                spu: ele
                            }
                        };
                    })
                });
                this.getHeight();
				return
            }

            if (!this.componentData.data.goodsList.length) {
                return;
            }

            const param = {
                product_id: this.componentData.data.goodsList
            }; // wx.showLoading({ title: '加载中', })

            let postApiStr = !e ? 'chooseProductNew' : 'chooseProduct';
            postData(postApiStr, param)
                .then((res) => {
                    // wx.hideLoading()
                    if (res.code === 2001000) {
                        const basegoods = this.componentData.data.goodsChecked;
                        const goods = !this.layout
                            ? res.data.filter((item) => {
                                  if (item.errcode) {
                                      return false;
                                  }

                                  return true;
                              })
                            : res.data
                                  .map((item, index) => {
                                      item.stock_price = basegoods[index].stock_price;
                                      item.min_price = basegoods[index].min_price;
                                      return item;
                                  })
                                  .filter((item) => {
                                      if (item.errcode) {
                                          return false;
                                      }

                                      return true;
                                  });
                        if (!this.layout) {
                            let pageGoods = this.goods;
                            pageGoods.map((ele) => {
                                goods.map((chid) => {
                                    if (ele.data.spu.product_id == chid.data.spu.product_id) {
                                        ele = chid;
                                    }
                                });
                            });
                            this.setData({
                                goods: pageGoods
                            });
                        } else {
                            this.setData({
                                goods
                            });
                        }

                        this.getHeight();
                    } else if (!e && res.data.code === 4001038) {
                        this.getGoodsInfo('again');
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                })
                .catch((res) => {
                    console.log('shopFind', res);
                });
        }
    }
};
</script>

<style lang="less">
	@import '../diy-goods/diy-goods.css';
</style>


